<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>资源互通关联</title>
<link type="text/css" href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="<%=basePath%>css/bootstrap-responsive.min.css" rel="stylesheet">
<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap.min.js"></script>
</head>
<body id="body" style="padding: 0px;">
	<div id="container" class="container-fluid" style='height: inherit; padding-left: 25px; padding-right: 25px'>
		<div class="row-fluid">
			<div class="column">
				<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">资源互通关联</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li id="instrumentButton"><a href="javascript:void(0);">仪器</a></li>
						<li id="institutionButton"><a href="javascript:void(0);">机构</a></li>
						<li id="projectButton"><a href="javascript:void(0);">检测项目</a></li>
						<li id="talentButton"  class="active"><a href="javascript:void(0);">人才</a></li>
						<li id="baseButton"><a href="javascript:void(0);">基地</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="javaScript:void(0)" id="navt6_list" onclick="homePage('talent');">返回</a></li>
					</ul>
				</div>
				</nav>
			</div>
		</div>

		<div class="row-fluid">
			<div class="span6 column">
				<c:if test="${!empty talents}">
					<div id="div4" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc4" class="panel-title">所在机构其他人才</h3>
						</div>
						<div class="panel-body">
							<div id="relationGraph" style="height: 400px; width: 100%; left: 0; top: 10;"></div>
						</div>
					</div>
				</c:if>
				<c:if test="${!empty instituion}">
					<div id="div1" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc1" class="panel-title">所在机构</h3>
						</div>
						<div class="panel-body">
							<table class="table table-striped table-bordered">
								<tbody>
									<c:forEach var="item" items="${instituion}">
										<c:choose>
											<c:when test="${item.key== '机构名称'}">
												<tr>
													<td>${item.key}</td>
													<td><a href="/relation/dw.ins?id=${instituion.get('机构编码')}">${item.value}</a></td>
												</tr>
											</c:when>
											<c:otherwise>
												<tr>
													<td>${item.key}</td>
													<td>${item.value}</td>
												</tr>
											</c:otherwise>
										</c:choose>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</c:if>
				<c:if test="${!empty base}">
					<div id="div3" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc3" class="panel-title">所在基地</h3>
						</div>
						<div class="panel-body">
							<table class="table table-striped table-bordered">
								<tbody>
									<c:forEach var="item" items="${base}">
										<c:choose>
											<c:when test="${item.key== '基地名称'}">
												<tr>
													<td>${item.key}</td>
													<td><a href="/relation/syjd.ins?id=${base.get('基地编号')}">${item.value}</a></td>
												</tr>
											</c:when>
											<c:otherwise>
												<tr>
													<td>${item.key}</td>
													<td>${item.value}</td>
												</tr>
											</c:otherwise>
										</c:choose>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</c:if>
			</div>
			<div class="span6">
				<c:if test="${!empty talent}">
					<div id="div2" class="panel panel-default ">
						<div class="panel-heading">
							<h3 id="loc2" class="panel-title">人才详情</h3>
						</div>
						<div class="panel-body">
							<table class="table table-striped table-bordered">
								<tbody>
									<c:forEach var="item" items="${talent}">
										<tr>
											<td>${item.key}</td>
											<td>${item.value}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</c:if>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="<%=basePath%>echarts/echarts.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>echarts/theme/macarons.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/relation.js"></script>
	<script type="text/javascript">
		function generateRelationEchart(){	
			var option = {
				tooltip: {
				    trigger: 'item',
				    formatter: '{a} : {b}'
				},
				legend: {
				    x: 'left',
				    data: ['人才','机构']
				},
				series: [{
			        type: 'graph',
			        layout: 'force',
			        symbol: "circle",
			        symbolSize: 60,
			        roam: true, //禁止用鼠标滚轮缩小放大效果
			        //edgeSymbol: ['circle', 'arrow'],
			        //edgeSymbolSize: [0, 10],
			        // 连接线上的文字
			        // focusNodeAdjacency: true, //划过只显示对应关系
				    categories: [
				        {
				            name: '人才'
				        },
				        {
				            name: '机构'
				        }
				    ],
					lineStyle: {
			            normal: {
			                opacity: 1,   // 不透明
			                width: 2,	  // 线宽
			                curveness: 0  // 不弯曲
			            }
			        },
			        // 圆圈内的文字
			        label: {
			            normal: {
			                show: true
			            }
			        },
			        force: {
			            repulsion: 2000   // 力引导布局斥力因子
			        },
				    draggable: 'false',
				    data: [],
				    links: []
				}]
			};
		
			if (document.getElementById('relationGraph') != null) {
			    var relationGraph = echarts.init(document.getElementById('relationGraph'), "macarons");
			    option.series[0].data = [];
			    option.series[0].links = [];
			    var ins_name = "${instituion.get('机构名称')}";
			    var ins_code = "${instituion.get('机构编码')}";
			    console.log(ins_name);
		    	option.series[0].data.push({
		    		name: ins_name,
		            category: 1,
		            symbolSize: 100,
		            value : ins_code
		    	});
			    <c:forEach var="item" items="${talents}"> 
			    	option.series[0].data.push({
			    		name: "${item[1]}",
			            category: 0,
			            value : "${item[0]}"
			    	});
			    	option.series[0].links.push({
			            source: ins_name,
			            target: "${item[1]}",
			            value: "朋友"
			        });
				</c:forEach> 
		    	relationGraph.on('click', function (params) {
	// 			    console.log(params.value);
		    		if(params.data.category == 1){
						window.location.href = "<%=basePath%>relation/dw.ins?id="+params.value;
					}else {
		    			window.location.href = "<%=basePath%>relation/ry.ins?id="+params.value;
					}
		    		return;
				});
			    relationGraph.setOption(option);
			}
		}
		generateRelationEchart();
	</script>
</body>
</html>